<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript01기초</title>
		<style type="text/css">
			body { font-size: 12px; line-height: 2em; }
			h3 { background: #e0d0e0; padding: 5px; }
			ul { margin-bottom: 40px; list-style-type: circle; }
			li { margin: 10px; }
		</style>
	</head>

	<body>
		<h1>자바스크립트 기본</h1>
		<h3>값, 변수</h3>
			<ul>
				<li>자바스크립트에는 6가지 종류의 값을 다룰수 있음<br />
					숫자형, 문자형, 불리언, 객체, 함수, 정의되지 않은 값</li>
				<li>숫자형은 연산자를 이용해서 산술식에 사용될 수 잇음</li>
				<li>문자형은 ""(큰따옴표)나 ''(작은따옴표)로 정의함</li>
				<li>특수문자는 escape seqeunce로 처리함</li>
				<li>표현식과 문장의 차이 : 종결문자 ;의 존재여부</li>
			</ul>
		<h3>변수</h3>
			<ul>
				<li>변수 : 값을 저장하는 저장소</li>
				<li>변수 선언시 var이라는 예약어를 사용</li>
				<li>자바와는 달리 변수의 자료형을 엄격히 검사하지 않기 때문에 변수 선언 및 초기화, 값 할당이 자유로움</li>
				<li>
					<script type="text/javascript">
						var pi = 3.14;
						document.write("var pi = " + pi + "<br />");
						document.write("pi x 123456 = " + (pi * 123456));
						pi = '수지 환영!!';
						document.write("<br />" + pi);
					</script>
				</li>
			</ul>
		<h3>내장함수</h3>
			<ul>
				<li>자바스크립트에서 자주 사용하는 기능을 작은 프로그램 조각으로 만들어 둔 것</li>
				<li>
					<script type="text/javascript">
						alert("경고창을 띄우려면 alert함수 사용");
						document.write("2와 4중에 큰수는 " + Math.max(2, 4));
						confirm("한번 놀아볼까?");
						prompt("ㅇㅋㄷㅋ", "ㅇㅋㅋ");
					</script>
				</li>
			</ul>
		<h3>조건문 : if</h3>
			<ul>
				<li>일반적으로 프로그램은 위에서 아래로 차례대로 내려가며 코드가 실행됨</li>
				<li>하지만, 블리언 조건식의 결과값에 따라 특정문장이 실행되거나 건너뛰게 할 수 있음</li>
				<li>
					<script type="text/javascript">
						var myage = prompt("나이를 입력해보세요");
						document.write("입력한 나이 : " + myage + "<br />");
						if(myage < 10)
							document.write("대가리에 피도 안말랐군요");
						else if(myage < 20)
							document.write("좋을때다");
						else if(myage < 30)
							document.write("아이고");
						else if(myage < 40)
							document.write("결혼은?");
					</script>
				</li>
			</ul>
		<h3>반복문</h3>
			<ul>
				<li>특정 코드를 자동으로 반복하는 방법 제공</li>
				<li>for : 반복횟수를 알고 있을 때</li>
				<li>while : 외부 요인에 의해 반복여부 결정</li>
				<li>
					<script type="text/javascript">
						document.write("수지 환영!! <br />");
						document.write("수지 환영!! <br />");
						document.write("수지 환영!! <br />");
						document.write("수지 환영!! <br />");
						document.write("수지 환영!! <br /> <hr />");
						
						for(var i=1; i<=10; ++i){
							document.write(i + " 수지 환영!! <br />");
						}
						
						var i = 1;
						while(i<=10){
							document.write(i + " 수지 환영!아싸!<br />");
							++i;
						}
					</script>
				</li>
			</ul>
		<h3>switch</h3>
			<ul>
				<li>if문보다 보기 좋고 사용하기 편한 다중 선택문</li>
				<li>
					<script type="text/javascript">
						var msg = '';
						switch(prompt("좋아하는 여자 연예인은?")){
							case "수지": msg = '나도'; break;
							case "전효성": msg = '올ㅋ'; break;
							case "전수진": msg = '포텐터짐'; break;
							default: msg = '아 쫌'; break;							
						}
					</script>
				</li>
			</ul>
		<h3>자료형 검사:typeof</h3>
	    <p>변수의 자료형을 알려줌</p>
			<script type="text/javascript">
				alert(typeof('abc'));	// 문자
				alert(typeof(12345));	// 숫자
				alert(typeof(true));	// 블리언
				alert(typeof(function(){}));	// 함수
			    alert(typeof(undefined));	// undefined
			    alert(typeof(new Date()));	// 객체
		    </script>	    
		<h3>undefined vs null</h3>
			<ul>
				<li>undefined : 변수는 선언하되 초기화되지 않은 경우</li>
				<li>null : 변수는 선언하되 초기화되지 않은 경우. 단, 객체에 한정해서 참조가 없을 때 사용</li>
				<script type="text/javascript">
					var mylove;
					//alert(mylove);
					//alert(mylove == undefined);
					alert(typeof mylove);	// undefined
					mylove = null;
					alert(mylove == undefined);	// true
					alert(typeof mylove);	// object
				</script>
			</ul>
		<h3>서로 다른 자료형 비교 : 자동 형변환</h3>
			<ul>
				<li>== : 먼저 동일한 자료형으로 변환 후 비교</li>
				<li>=== : 자동 형변환 없이 두 값만을 비교</li>
				<li>
					<script type="text/javascript">
						document.write("false == 0 결과는 " + (false == 0) + "<br />");
						document.write(" '' == 0 결과는" + ('' == 0) + "<br />");
						document.write("'5' == 5 결과는 " + ('5' == 5) + "<br />");
						document.write("7 == 7 결과는 " + (7 == 7) + "<br />");
						document.write("null == undefined 결과는 " + (null == undefined) + "<br /><hr />");

						document.write("false === 0 결과는 " + (false === 0) + "<br />");
						document.write(" '' === 0 결과는" + ('' === 0) + "<br />");
						document.write("'5' === 5 결과는 " + ('5' === 5) + "<br />");
						document.write("7 === 7 결과는 " + (7 === 7) + "<br />");
						document.write("null === undefined 결과는 " + (null === undefined) + "<br />");
					</script>
				</li>
			</ul>
		<h3>NaN : Not a Number</h3>
			<ul>
				<li>표현식의 결과값이 숫자값으로 표현하기 어려운 경우</li>
				<li>ECMAScript에서는 isNaN 함수 제공<br />
					표현식의 결과값을 숫자값으로 확인가능한지 여부 검사</li>
				<li>
					<script type="text/javascript">
						document.write('mylove'*100 + "<br />");
						
						document.write(isNaN(NaN) + "<br />");
						document.write(isNaN(10) + "<br />");
						document.write(isNaN("10") + "<br />");
						document.write(isNaN("blue") + "<br />");
						document.write(isNaN(true) + "<br />");
					</script>
				</li>
			</ul>
			
			
		<!--
			
		JavaScript : ECMAScript 5
		ECMA가 표준화한 스크립트 언어
		웹 브라우저의 여러 부분과 속성들을 쉽게 제어할 수 있고(BOM),
		html문서와 CSS도 동적으로 다룰 수 있게 해 줌(DOM)
				
		-->
		
		
	</body>
</html>
